<template>
<div class="analyze">
    <div id="myChart" :style="{width:wEc+'px',height:hEc+'px'}"></div>
</div>
</template>

<script>
export default {
    name: 'Echarts',
    data() {
        return {
            screenWidth: 0,
            wEc: 800,
            hEc: 400
        }
    },
    computed: {

    },
    methods: {
        setStyles() {
            this.screenWidth = document.body.clientWidth
            let w = this.screenWidth - 256 - 18 * 2
            this.wEc = w
            this.hEc = w > 1400 ? 400 : 300
            setTimeout(() => {
                this.echartsInit()
            }, 0)
        },
        echartsInit() {
            // 找到容器
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            // 开始渲染
            let option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['浏览次数(PV)', '独立访客(UV)', 'IP']
                },
                grid: {
                    left: '2%',
                    right: '3%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [

                        '10-20',

                        '10-21',

                        '10-22',

                        '10-23',

                        '10-24',

                        '10-25',

                        '10-26',

                        '10-27',

                        '10-28',

                        '10-29',

                        '10-30',

                        '10-31',

                        '11-01',

                        '11-02',

                        '11-03',

                        '11-04',

                        '11-05',

                        '11-06',

                        '11-07',

                        '11-08',

                        '11-09',

                        '11-10',

                        '11-11',

                        '11-12',

                        '11-13',

                        '11-14',

                        '11-15',

                        '11-16',

                        '11-17',

                        '11-18'

                    ]
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                        name: '浏览次数(PV)',
                        type: 'line',
                        data: [

                            465,

                            369,

                            340,

                            332,

                            219,

                            148,

                            377,

                            459,

                            333,

                            362,

                            418,

                            106,

                            147,

                            588,

                            393,

                            437,

                            502,

                            524,

                            174,

                            111,

                            366,

                            544,

                            488,

                            466,

                            347,

                            159,

                            166,

                            465,

                            668,

                            307

                        ]
                    },
                    {
                        name: '独立访客(UV)',
                        type: 'line',
                        data: [

                            226,

                            191,

                            167,

                            196,

                            155,

                            92,

                            171,

                            201,

                            155,

                            138,

                            136,

                            80,

                            79,

                            341,

                            169,

                            155,

                            169,

                            208,

                            87,

                            84,

                            151,

                            239,

                            184,

                            169,

                            167,

                            94,

                            94,

                            171,

                            345,

                            102

                        ]
                    },
                    {
                        name: 'IP',
                        type: 'line',
                        data: [

                            169,

                            148,

                            139,

                            163,

                            128,

                            86,

                            138,

                            158,

                            142,

                            123,

                            125,

                            66,

                            70,

                            272,

                            144,

                            132,

                            150,

                            171,

                            71,

                            58,

                            140,

                            192,

                            158,

                            155,

                            160,

                            81,

                            82,

                            157,

                            301,

                            102

                        ]
                    }
                ]
            };
            myChart.setOption(option)
        },
    },
    mounted() {
        this.setStyles()
    }
}
</script>

<style lang="less" scoped>
.analyze {
    background-color: #fff;
}

#myChart {
    width: 800px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
}
</style>
